http://www.tpblog.xin:8888/user/dologin<template>
  <div>
    <div class="login_box cl" :style="bg">
      <div class="mid--1150 pos_rel">
        <div class="login_body rf pos_abs">
          <!-- 登录账号 -->
          <div class="title flex">
            <div class="logo">
              <img />
            </div>
            <span class="name">登录账号</span>
          </div>
          <hr />
          <br />
          <div class="main">
            <div class="text">
              <input
                type="text"
                class="innerBox"
                v-model="phone"
                placeholder="请输入您的手机号"
                name="phone"
                required
                autofocus
              />
              <span>
                <em class="fa fa-times-circle" aria-hidden="true" @click="reset_phone()"></em>
              </span>
            </div>
            <div class="text">
              <input
                type="password"
                class="innerBox"
                v-model="upwd"
                id="password"
                placeholder="请输入您的密码"
                name="upwd"
                required
                minlength="6"
                maxlength="15"
              />
              <span>
                <em class="fa fa-times-circle" aria-hidden="true" @click="reset_upwd()"></em>
              </span>
            </div>
            <div class="chose">
              <div class="lf chose-box">
                <div>
                  <a @click="to('register')">注册账号</a>
                </div>
              </div>
              <div class="rf chose-box">
                <div style="text-align: right;">
                  <a @click="to('retrievePwd')">忘记密码?</a>
                </div>
              </div>
            </div>
            <input class="button_login" type="button" value="登录" @click="bt_login" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var _self;
import "@/assets/css/frx/common.css";
import "@/assets/css/frx/font-awesome-4.7.0/css/font-awesome.min.css";
import "@/assets/css/frx/login.css";
import pub from "../../api/frx/js/public";
export default {
  data() {
    return {
      phone: "",
      upwd: "",
      bg: {
        backgroundImage: "url(" + require("@/assets/imgs/cl/img1.jpg"),
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center ",
        backgroundSize: "100%"
      }
    };
  },
  created() {
    _self = this;
  },
  methods: {
    // 跳转
    to(index) {
      _self.$router.push(index);
      _self.reset_phone();
      _self.reset_upwd();
    },
    // 登陆
    async bt_login() {
      try {
        pub.ch_phone(_self.phone);
        pub.ch_upwd(_self.upwd);

        // /**1.登陆成功后，先把所有的信息哦存到缓存，再跳转主页 */
        var tt = await pub.http_post("user", "dologin", {
          username: _self.phone,
          password: _self.upwd
        });

        if (!tt || tt.result != "success") {
          _self.$message.error(tt.message);
          _self.reset_phone();
          _self.reset_upwd();
          return;
        }

        sessionStorage.setItem("userInfo", JSON.stringify(tt.data));
        this.$message({
          message: "登录成功！",
          type: "success"
        });
        window.open("/pc", "_self");
      } catch (e) {
        if (e.message == "phone") {
          alert("请输入正确手机号11位");
          // history.go(0);
          return;
        } else if (e.message == "upwd") {
          alert("密码必须为字母加数字且长度6~16位");
          // history.go(0);
          return;
        }
      }
    },
    // 清空
    reset_phone() {
      _self.phone = "";
      return;
    },
    reset_upwd() {
      _self.upwd = "";
      return;
    }
  }
};
</script>

<style scoped>
</style>